<template>
    <div class="trafficcontext">
        <div class="container">
            <div class="module">
            <split-vertical title="订单详情"></split-vertical>
            <el-row>
                <el-col :span="8">
                  <label>订单平台:</label><span>{{orderInfoList.channelName}}</span>
                </el-col>
                <el-col :span="8">
                  <label>订单公司：</label><span>{{orderInfoList.companyName}}</span>
                </el-col>
                <el-col :span="8">
                  <label>订单编号：</label><span>{{orderInfoList.orderId}}</span>
                </el-col>
            </el-row>
<!--          <el-row>-->
<!--            <el-col :span="8">-->
<!--              <label>省:</label><span>{{orderInfoList.province}}</span>-->
<!--            </el-col>-->
<!--            <el-col :span="8">-->
<!--              <label>市：</label><span>{{orderInfoList.city}}</span>-->
<!--            </el-col>-->
<!--            <el-col :span="8">-->
<!--              <label>区：</label><span>{{orderInfoList.district}}</span>-->
<!--            </el-col>-->
<!--          </el-row>-->
          <el-row>
            <el-col :span="8">
              <label>渠道商品编码:</label><span>{{orderInfoList.channelItemCode}}</span>
            </el-col>
            <el-col :span="8">
              <label>渠道商品规格：</label><span>{{orderInfoList.channelItemSpecification}}</span>
            </el-col>
            <el-col :span="8">
              <label>快递单号：</label><span>{{orderInfoList.expressCode}}</span>
            </el-col>
          </el-row>

            <el-row>
                <el-col :span="8">
                  <label>购买数量：</label><span>{{orderInfoList.purchaseNum}}</span>
                </el-col>
                <el-col :span="8">
                  <label>重量(kg)：</label><span>{{orderInfoList.orderWeight}}</span>
                </el-col>
                <el-col :span="8">
                  <label>订单时间：</label><span>{{orderInfoList.orderTime}}</span>
                </el-col>
            </el-row>
          <el-row>
            <el-col :span="8">
              <label>订单金额：</label><span>{{orderInfoList.orderMoney}}</span>
            </el-col>
            <el-col :span="8">
              <label>商品成本总价：</label><span>{{orderInfoList.itemCost}}</span>
            </el-col>
            <el-col :span="8">
              <label>佣金值：</label><span>{{orderInfoList.agencyFee}}</span>
            </el-col>
          </el-row>
          <el-row>
          <el-col :span="8">
            <label>佣金比：</label><span>{{orderInfoList.agencyPercent}}</span>
          </el-col>
          <el-col :span="8">
            <label>仓库名称：</label><span>{{orderInfoList.depotName}}</span>
          </el-col>
          <el-col :span="8">
            <label>快递费用：</label><span>{{orderInfoList.expressCharges}}</span>
          </el-col>
        </el-row>
          <el-row>
            <el-col :span="8">
              <label>配送时间：</label><span>{{orderInfoList.deliveryTime}}</span>
            </el-col>
            <el-col :span="8">
              <label>配送模式：</label><span>{{orderInfoList.deliveryMode | deliveryMode}}</span>
            </el-col>
            <el-col :span="8">
              <label>操作员姓名：</label><span>{{orderInfoList.operatorName}}</span>
            </el-col>
          </el-row>
            <el-row>
              <el-col :span="8">
                <label>总金额：</label><span>{{orderInfoList.orderMoney}}</span>
              </el-col>
              <el-col :span="8">
                <label>收货人：</label><span>{{orderInfoList.receiverName}}</span>
              </el-col>
            </el-row>
          <el-row>
                <el-col :span="8">
                  <label>联系方式：</label><span>{{orderInfoList.receiverPhone}}</span>
                </el-col>
                <el-col :span="16">
                  <label>收货地址：</label><span>{{orderInfoList.receiverAddress}}</span>
                </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <label>订单客户备注：</label><span>{{orderInfoList.orderCustomerNote}}</span>
              </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                  <label>渠道商品名称：</label><span>{{orderInfoList.channelItemName}}</span>
                </el-col>
            </el-row>
            </div>
        </div>
          <div class="tableView">
            <split-vertical title="商品明细 && 订单明细"></split-vertical>
            <el-tabs v-model="activeName" type="card" >
              <el-tab-pane label="商品明细" name="first">
                <div class="table">
                  <el-table
                    :data="items"
                    height="260"
                    highlight-current-row
                    :header-cell-style="getRowClass"
                    @cell-dblclick="celldblclick"
                    style="width: 100%">
                    <el-table-column
                      prop="itemName"
                      label="商品名称"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="itemCode"
                      label="商品编码"
                      :show-overflow-tooltip="true"
                      width="200">
                    </el-table-column>
                    <el-table-column
                      prop="itemBarCode"
                      label="商品条形码"
                      :show-overflow-tooltip="true"
                      width="200">
                    </el-table-column>
                    <el-table-column
                      width="80"
                      prop="purchaseNum"
                      label="购买数量">
                    </el-table-column>
                    <el-table-column
                      width="80"
                      prop="weight"
                      label="重量">
                    </el-table-column>
                    <el-table-column
                      width="80"
                      prop="purchasePrice"
                      label="进货价" >
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="子订单商品明细" name="second">
                <div class="table">
                  <el-table
                    :data="subOrders"
                    :header-cell-style="getRowClass"
                    @cell-dblclick="celldblclick"
                    height="260"
                    highlight-current-row
                    style="width: 100%">
                    <el-table-column
                      prop="subOrderId"
                      label="子订单编码"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="subOrderWeight"
                      label="子订单重量"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="itemCount"
                      label="商品种类数量"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="subExpressCharges"
                      label="快递费用"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="subExpressCode"
                      label="快递单号"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="subDeliveryTime"
                      label="配送时间"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="subOrderStatus"
                      label="订单状态"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      label="操作"
                      width="120">
                      <template slot-scope="scope">
                        <el-button
                          @click="look(scope.row)"
                          type="text"
                          size="small">
                          查看
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="订单退货列表" name="third">
                <div class="table">
                  <el-table
                    :data="returns"
                    :header-cell-style="getRowClass"
                    @cell-dblclick="celldblclick"
                    height="260"
                    highlight-current-row
                    style="width: 100%">
                    <el-table-column
                      prop="oriOrderCode"
                      label="原始订单编号"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="newOrderCode"
                      label="补发订单编号"
                      :show-overflow-tooltip="true">
<!--                      <template slot-scope="scope">-->
<!--                        <a :href=""></a>-->
<!--                      </template>-->
                    </el-table-column>
                    <el-table-column
                      prop="returnType"
                      label="退货类型"
                      :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                        <p>{{scope.row.returnType | returnType}}</p>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="returnMoney"
                      label="退还金额"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="returnAgency"
                      label="退还佣金值"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="postageAssume"
                      label="承担物流费用"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="extraCharges"
                      label="额外费用"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="returnItemsMoney"
                      label="退还商品金额"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="damageItemsMoney"
                      label="破损商品金额"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="statusMessage"
                      label="状态"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      label="操作"
                      width="120">
                      <template slot-scope="scope">
                        <el-button
                          @click="lookReturnGoods(scope.row)"
                          type="text"
                          size="small">
                          查看
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="客诉申请列表" name="four">
                <div class="table">
                  <el-table
                    :data="applies"
                    :header-cell-style="getRowClass"
                    height="260"
                    @cell-dblclick="celldblclick"
                    highlight-current-row
                    style="width: 100%">
                    <el-table-column
                      prop="complainCode"
                      label="客诉编码"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="applyTime"
                      label="申请时间"
                      :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                        <p>{{scope.row.applyTime | applyTime}}</p>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="applyType"
                      label="申请类型"
                      :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                        <p>{{scope.row.applyType | applyType}}</p>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="statusMessage"
                      label="状态"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      prop="username"
                      label="申请人"
                      :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      label="操作"
                      width="120">
                      <template slot-scope="scope">
                        <el-button
                          @click="lookApplyInfo(scope.row)"
                          type="text"
                          size="small">
                          查看
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!--弹框-->
            <view-order v-if="show" :row="row" @close="close"></view-order>
            <goods-reject @closeReturnGoods="closeReturnGoods"  v-if="showTip" :returnShops="returnShops"></goods-reject>
            <apply-info @closeApply="closeApply"  v-if="isShowApply"  :applyInfo="applyInfo"></apply-info>
            <div class="back">
                <el-button @click="cancel" style="margin-right:20px;" size="medium">返回</el-button>
                <el-button @click="confirm" size="medium" type="primary">确定</el-button>
            </div>

    </div>
</template>
<script>
  import goodsReject from 'components/base/OrderQuery/goodsReject'
  import applyInfo from 'components/base/OrderQuery/applyInfo'
  import viewOrder from 'components/base/OrderQuery/viewOrder'
  import SplitVertical from "components/common/SplitVertical"

export default {
    components:{
      SplitVertical,viewOrder,goodsReject,applyInfo
    },
    data(){
        return{
            orderInfoList:{},
            items:[],
            orderInfo:{},
            subOrders:[],
            activeName:'first',
            show:false,
            showTip:false,
            isShowApply:false,
            row:{},
            returns:[],
            applies:[],
            returnShops:{},
            applyInfo:{},
            id:'',
            orderCode:'',
            path:''
        }
    },
    filters:{
      deliveryMode(val){
        switch(val){
          case "A":return "邮政代发";break;
          case "B":return "换货";break;
          case "C":return "代发";break;
          case "D":return "补发";break;
        }
      },
      returnType(val){
        switch(val){
          case "A":return "退货";break;
          case "B":return "换货";break;
          case "C":return "补发";break;
          }
      },
      applyType(val){
        switch(val){
          case "A":return "退货";break;
          case "B":return "换货";break;
          case "C":return "补发";break;
        }
      },
      applyTime(time){
        time= new Date(time);
        return time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate() + ' ' + time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds();
      }
    },
    created(){
        this.id= this.$route.query.id
        this.orderCode=this.$route.query.orderCode,
        this.path=this.$route.query.path
        let parmas={
          id:this.id,
        }
        let success=data=>{
          if(data.code=="OK"){
            this.orderInfoList=data.data
            this.items=this.orderInfoList.items
            this.subOrders=this.orderInfoList.subs
            this.returns=this.orderInfoList.returns
            this.applies=this.orderInfoList.applies
          }else{
            this.$message.error(data.msg)
          }
        }
        this.api.erpOrderGetOne(parmas,success)
    },
    methods:{
        look(row){
            this.show=true
            this.row=row
        },
        lookReturnGoods(row){
            this.returnShops=row
            this.showTip=true
        },
        lookApplyInfo(row){
          this.applyInfo=row
          this.isShowApply=true
        },
        closeReturnGoods(){
            this.showTip=false
        },
        closeApply(){
          this.isShowApply=false
        },
          //实现双击复制
        celldblclick (row, column, cell, event) {
          var _this=this
          this.$copyText(row[column.property]).then(function (e) {
            _this.$message.success("复制成功")
          }, function (e) {
          })
        },
        close(){
          this.show=false;
        },
        confirm(){
        if(this.path == "add"){
            this.$router.push({
              path:'/complaint-add',
              query:{
                orderCode:this.orderCode
              }
            })
          }else{
             this.$router.go(-1)
          }
        },
        getRowClass({row, column, rowIndex, columnIndex}) {
          if (rowIndex == 0) {
            return 'background:#fafafa;color:rgba(0, 0, 0, 0.85)'
          } else {
            return ''
          }
        },
        //取消，关闭弹窗
        cancel(){
          if(this.path == "add"){
            this.$router.push({
              path:'/complaint-add',
              query:{
                orderCode:this.orderCode
              }
            })
          }else{
             this.$router.go(-1)
          }
        },
    },

}
</script>
<style scoped>
.trafficcontext .el-form--inline .el-form-item{
    margin:10px 30px;
}
.trafficcontext .el-input{
    width:250px;
}
.trafficcontext .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
    background: #eee!important;
  }
</style>
<style lang="scss" scoped>

.trafficcontext{
    .container{
        label{
          width:110px;
          color:#606266;
          font-size:14px;
          line-height:25px;
          display: inline-block;
        }
        span{
          font-size:13px;
          line-height:25px;
        }

        .module{

          background: #fff;
          border-left: 2px solid #e8e8e8;
          border-right: 2px solid #e8e8e8;
          border-bottom: 2px solid #e8e8e8;
            label{
              width:150px;
              text-align: center;
              line-height:35px;
              display: inline-block;
            }
            span{
              ine-height: 35px;
              display: inline-block;
            }
        }
        .orderBtn{
            display: block;
            margin:100px 40% 0 40%;
        }
        .table{
            margin:10px 0;
        }
    }
    .back{
        width:100%;
        text-align:center;
        padding:20px 0;
    }
  .tableView{
    margin-top: 3px;
    padding:0 10px;
    border-left: 2px solid #e8e8e8;
    border-right: 2px solid #e8e8e8;
    border-bottom: 2px solid #e8e8e8;
    background: #fff;
  }
}
</style>
